<template>
  <div class="details" @mousewheel.prevent>
    <div class="icon">
      <div class="ift-back" @click="returns"></div>
      <div class="ift-home" @click="home"></div>
    </div>
    <div class="images">
      <img :src="subtitle.url" alt="" />
      <div class="name">
        <h1>{{ subtitle.names }}</h1>
        <h2>人气:8亿<span>穿越</span><span>玄幻</span></h2>
      </div>
      <div class="back"></div>
    </div>
    <div class="content">
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        title-inactive-color="#999"
        title-active-color="#999"
      >
        <van-tab :title="'详情'">
          <div class="Details">
            <p>{{ subtitle.js }}</p>
          </div>
          <div class="catalogue">
            <div class="author">
              <h1>作者</h1>
              <div class="authorName">
                <div
                  class="head-portrait"
                  :style="'background-image: url(' + subtitle.head + ')'"
                ></div>
                <span>{{ subtitle.author }}</span>
                <p>{{subtitle.ren}}</p>
              </div>
            </div>
            <div class="author">
              <h1>角色</h1>
              <div
                class="authorName"
                v-for="(item, index) in subtitle.male"
                :key="index"
              >
                <div
                  :style="'background-image: url(' + item.url + ')'"
                  class="head-portrait"
                ></div>
                <span>{{ item.name }}</span>
                <p>{{ item.js }}</p>
              </div>
            </div>
          </div>
          <div class="list">打榜</div>
          <div class="Heat-list">
            <div class="head">
              <div>本周人气180万</div>
              <div>排名30</div>
              <div>打call榜</div>
            </div>
            <div class="lis">
              <ul>
                <li>
                  <p>50</p>
                  阅读
                </li>
                <li>
                  <p>50</p>
                  日活
                </li>
                <li>
                  <p>50</p>
                  收藏
                </li>
                <li>
                  <p>50</p>
                  分享
                </li>
                <li>
                  <p>50</p>
                  留言
                </li>
              </ul>
              <ul>
                <li>
                  <p>50</p>
                  打赏
                </li>
                <li>
                  <p>50</p>
                  礼物
                </li>
                <li>
                  <p>50</p>
                  月票
                </li>
                <li>
                  <p>50</p>
                  推荐
                </li>
                <li>
                  <p>50</p>
                  评分
                </li>
              </ul>
            </div>
          </div>
          <div class="support">
            <div>
              <p>作者大大需要您的支持</p>
              <p>ヾ(●°∇°●)ﾉﾞ</p>
            </div>
            <div @click="Popup">
              <span class="ift-drumstick"></span> 给作者加油打call～
            </div>
          </div>
        </van-tab>
        <van-tab :title="'目录'">
          <div class="list listmag">目录</div>
          <van-collapse v-model="activeNames">
            <van-collapse-item name="1">
              <template #title>
                <div>
                  <span>连载中</span> 最新章节：
                  <span class="hidde">第{{ length }}话 {{ names }}~</span>
                </div>
              </template>
              <ul class="ml">
                <li v-for="(item, index) in subtitle.data" :key="index">
                  <span>{{ item.time }}</span>
                  <span @click="Content(item.id)">{{ item.sub }}</span>
                  {{ item.name }}
                  <div>
                    {{ item.up }}
                    <i
                      v-show="!item.flag"
                      @click="giveTheThumbsUp(index)"
                      class="ift-support-line"
                    ></i>
                    <i
                      v-show="item.flag"
                      @click="giveTheThumbsUp(index)"
                      class="ift-support"
                    ></i>
                  </div>
                </li>
              </ul>
            </van-collapse-item>
          </van-collapse>
        </van-tab>
        <van-tab :title="'推荐'">
          <div class="list listmag">推荐</div>
          <div class="recommend">
            <h1>猜你喜欢</h1>
            <div v-for="(item, index) in recommend" :key="index">
              <img :src="item.url" alt="" />
              <p>{{ item.name }}</p>
            </div>
          </div>
          <div class="recommend">
            <h1>看过又看</h1>
            <div v-for="(item, index) in recommend" :key="index">
              <img :src="item.url" alt="" />
              <p>{{ item.name }}</p>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'留言'">
          <div class="list">留言</div>
          <div class="Number-of-comments">
            <span>{{ num }}</span>
            <p>条评论</p>
          </div>
          <div class="inputs">
            <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              maxlength="500"
              placeholder="有事没事说两句"
              show-word-limit
            />
          </div>
          <div class="hg">
            <p @click="add">吐槽一下</p>
          </div>
          <van-collapse v-model="activeNames">
            <van-collapse-item title="最新评论" name="2" class="pl">
              <ul class="comment">
                <li v-for="(item, index) in comment" :key="index">
                  <div>
                    <img :src="item.url" alt="" />
                    <h1>{{ item.name }}</h1>
                    <h2>{{ item.time }}</h2>
                  </div>
                  <div class="fabulous">
                    <div class="com">
                      <p>{{ item.com }}</p>
                    </div>
                    <span @click="flags(index)">
                      <i v-show="!item.flag" class="ift-support-line"></i>
                      <i v-show="item.flag" class="ift-support"></i>
                      <div>{{ item.number }}</div>
                    </span>
                  </div>
                </li>
              </ul></van-collapse-item
            >
          </van-collapse>
        </van-tab>
      </van-tabs>
    </div>
    <div class="bottom">
      <div class="share">
        <div>
          <ul>
            <li v-show="!flag" class="ift-heart-line" @click="collection"></li>
            <li v-show="flag" class="ift-heart" @click="colledel"></li>
          </ul>
          收藏
        </div>
        <div @click="share">
          <p class="ift-share"></p>
          分享
        </div>
        <div @click="Popup">
          <p class="ift-add"></p>
          更多
        </div>
      </div>
      <div class="start" @click="Comic">
        <p>序章</p>
        开始阅读
      </div>
    </div>
    <div class="Popup" v-if="!this.give">
      <div class="imgs" @click="Popup">
        <p>作者大大需要您的支持</p>
        ヾ(●°∇°●)ﾉﾞ
      </div>
      <ul>
        <li>
          <div class="color1 ift-zanshang" @click="appreciate"></div>
          赞赏
        </li>
        <li>
          <div class="color2 ift-liwu" @click="giftList"></div>
          礼物
        </li>
        <li>
          <div class="color3 ift-ypx"></div>
          月票
        </li>
        <li>
          <div class="color4 ift-tjx"></div>
          推荐
        </li>
        <li>
          <div class="color5 ift-star-line"></div>
          评分
        </li>
        <li>
          <div class="color6 ift-share"></div>
          分享
        </li>
      </ul>
    </div>
    <div class="shares" v-if="showShare">
      <ul>
        <p>分享链接</p>
        <li @click="icon">
          <p class="icon-blue ift-qq"></p>
          QQ
        </li>
        <li @click="icon">
          <p class="icon-green ift-wechat"></p>
          微信
        </li>
        <li @click="icon">
          <p class="icon-red ift-sina"></p>
          新浪
        </li>
        <li @click="icon">
          <p class="icon-yellow ift-qzone"></p>
          QQ空间
        </li>
        <li @click="icon">
          <p class="icon-yellow ift-friend"></p>
          朋友圈
        </li>
        <li @click="icon">
          <p class="icon-lightgreen ift-copy"></p>
          复制链接
        </li>
      </ul>
      <div @click="share">取消</div>
    </div>
    <div class="apprec" v-if="appre">
      <div class="back">
        <div class="head">
          <div>
            <p></p>
            赞赏
          </div>
        </div>
        <ul class="diamonds">
          <li v-for="(item, index) in lis" :key="index" @click="diam">
            <p></p>
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <div class="apprec" v-if="gift">
      <div class="back">
        <div class="head">
          <div>
            <p class="gift"></p>
            礼物
          </div>
        </div>
        <ul class="diamonds">
          <li v-for="(item, index) in lis" :key="index" @click="diam">
            <p class="gift"></p>
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import axios from "axios";
export default {
  data() {
    return {
      gift: false,
      lis: ["6", "66", "666", "233", "1111", "9999"],
      appre: false,
      showShare: false,
      flag: false,
      message: "",
      num: 50,
      active: 0,
      activeNames: ["0"],
      give: true,
      subtitle: [],
      recommend: [
        {
          url: "https://image.yqmh.com/mh/17745_2_1.jpg-400x200.webp",
          name: "凤逆天下",
        },
        {
          url: "https://image.yqmh.com/mh/17745_2_1.jpg-400x200.webp",
          name: "凤逆天下",
        },
        {
          url: "https://image.yqmh.com/mh/17745_2_1.jpg-400x200.webp",
          name: "凤逆天下",
        },
        {
          url: "https://image.yqmh.com/mh/17745_2_1.jpg-400x200.webp",
          name: "凤逆天下",
        },
      ],
      comment: "",
      length: "",
      names: "",
      authorname: "",
    };
  },
  methods: {
    add() {
      let date = new Date();
      this.comment.unshift({
        name: "皮蛋",
        url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2Fd0%2F06%2Fc1%2Fd006c115012b911d7f7a44328b1057e3_2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644297061&t=6b3444785d8bf8124bc99bea319e3297",
        com: this.message,
        time: date.toLocaleString(),
        number: 0,
        flag: false,
        id: 555,
      });
      this.message = "";
      this.num += 1;
    },
    flags(index) {
      this.comment[index].flag = !this.comment[index].flag;
      if (this.comment[index].flag) {
        this.comment[index].number += 1;
        Toast("点赞成功");
      } else {
        this.comment[index].number -= 1;
      }
    },
    giftList() {
      this.gift = !this.gift;
      this.Popup();
    },
    diam() {
      Toast("谢谢主人~喵");
      this.appre = false;
      this.gift = false;
    },
    appreciate() {
      this.appre = !this.appre;
      this.Popup();
    },
    share() {
      this.showShare = !this.showShare;
    },
    icon() {
      this.share();
      // alert("分享成功");
      Toast("分享成功");
    },
    Comic() {
      let inx = 0;
      this.$router.push({ name: "ComicContent", query: { id: inx } });
      this.$store.commit("hists", this.subtitle);
    },
    Content(id) {
      this.$router.push({ name: "ComicContent", query: { id: id } });
    },
    Popup() {
      this.give = !this.give;
    },
    collection() {
      this.flag = !this.flag;
      let app = this.subtitle.id;
      this.$store.commit("addData", app);
      Toast("新书已放好，看我看我~");
    },
    colledel() {
      this.flag = !this.flag;
      let app = this.subtitle.id;
      this.$store.commit("delDatas", app);
    },
    giveTheThumbsUp(index) {
      this.subtitle.data[index].flag = !this.subtitle.data[index].flag;
      if (this.subtitle.data[index].flag) {
        this.subtitle.data[index].up += 1;
        Toast("点赞成功");
      } else {
        this.subtitle.data[index].up -= 1;
        Toast("取消点赞");
      }
    },
    returns() {
      this.$router.push("/homePage");
    },
    home() {
      this.$router.push("/homePage");
    },
  },
  created() {
    let ass = this.$route.query.id;
    axios.get("http.json").then((res) => {
      console.log(res);
      let asd = res.data.name;
      asd.findIndex((item) => {
        if (item.id == ass) {
          this.subtitle = item;
        }
      });
      console.log(this.subtitle);
      this.length = this.subtitle.data.length;
      this.num = this.subtitle.comment.length;
      this.names = this.subtitle.data[this.length - 1].name;
      this.comment = this.subtitle.comment.reverse();
      this.$store.commit("ModifyID", ass);
    });
  },
};
</script>
<style lang="less">
.details {
  width: 100%;
  height: 100vh;
  .icon {
    width: 90px;
    height: 45px;
    position: fixed;
    top: 1%;
    left: 2%;
    display: flex;
    z-index: 1;
    div {
      text-align: center;
      width: 50%;
      font-size: 20px;
      color: white;
    }
  }
  .images {
    color: white;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .name {
      width: 90%;
      position: absolute;
      padding: 0 5%;
      bottom: 15%;
      z-index: 1;
      h1 {
        font-size: 24px;
        margin: 0;
      }
      h2 {
        font-size: 14px;
        font-weight: 500;
        margin: 2% 0 0 0;
        span {
          margin: 0 1%;
        }
      }
    }
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.3);
    }
  }
  .content {
    padding-bottom: 70px;
    .van-tabs__content {
      .van-sticky--fixed {
        z-index: 10;
      }
      .Details {
        margin: 16px;
        p {
          font-size: 12px;
        }
      }
      .catalogue {
        margin: 16px;
        .author {
          width: 100%;
          .authorName {
            display: inline-block;
            width: 30%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .head-portrait {
              width: 40px;
              height: 40px;
              background: aqua;
              border-radius: 50%;
              background-size: 100%;
              display: inline-block;
            }
            span {
              margin: 0 5px;
              font-size: 12px;
              color: #999;
            }
            p {
              font-size: 12px;
              color: #999;
              margin: 0 5px;
            }
          }
          h1 {
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
      .recommend {
        height: 45vh;
        h1 {
          font-size: 16px;
          color: #555;
          padding: 5px 10px;
        }
        div {
          float: left;
          width: 49%;
          margin-left: 2%;
          color: #666;
          &:nth-child(2n) {
            margin-left: 0;
          }
          img {
            // background-size: 100%;
            width: 100%;
          }
          p {
            padding-left: 10px;
            font-size: 12px;
            margin-top: 1%;
            margin-bottom: 10%;
          }
        }
      }
      .list {
        width: 10%;
        background-image: linear-gradient(to right, #ff6b46, #ff2e67);
        padding: 1% 0;
        text-align: center;
        color: white;
        font-size: 12px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
      }
      .Heat-list {
        margin: 16px;
        font-size: 12px;
        .head {
          display: flex;
          justify-content: space-between;
          color: #999;
        }
        .lis {
          margin-top: 16px;
          ul {
            color: #999;
            list-style: none;
            display: flex;
            justify-content: space-around;
            text-align: center;
            padding: 1% 0;
            border: 1px solid #ffe9e2;
            &:nth-child(1) {
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              border-bottom: 1px dashed #ffe9e2;
              border-bottom-left-radius: 5px;
              border-bottom-right-radius: 5px;
            }
            &:nth-child(2) {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
              border-top: 1px dashed #ffe9e2;
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
            }
            li {
              p {
                color: black;
                margin: 0;
              }
            }
          }
        }
      }
      .support {
        display: flex;
        margin: 16px;
        color: #999;
        font-size: 12px;
        justify-content: space-between;
        align-items: center;
        div {
          &:nth-child(2) {
            color: white;
            background-image: linear-gradient(to right, #ff6b46, #ff2e67);
            padding: 2% 3%;
            border-radius: 15px;
          }
          span {
            font-size: 16px;
          }
          p {
            margin: 0;
          }
        }
      }
      .van-collapse {
        .van-collapse-item {
          .van-cell {
            .van-cell__title {
              font-size: 12px;
              .hidde {
                width: 50%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              span {
                margin: 0 1%;
              }
            }
          }
          .van-collapse-item__wrapper {
            .van-collapse-item__content {
              padding: 6px 16px;
              font-size: 15px;
              .ml {
                list-style: none;
                li {
                  margin: 2% 0;
                  span {
                    margin-right: 2%;
                  }
                  div {
                    float: right;
                    font-size: 12px;
                    line-height: 20px;
                    padding-right: 6%;
                    position: relative;
                    i {
                      color: #fc6976;
                      position: absolute;
                      right: 0;
                    }
                  }
                }
              }
              .comment {
                li {
                  margin: 5% 0;
                  div {
                    img {
                      width: 10%;
                      border-radius: 50%;
                      float: left;
                      margin-right: 2%;
                    }
                    h1,
                    h2 {
                      margin: 0;
                      font-weight: 500;
                    }
                    h1 {
                      font-size: 14px;
                    }
                    h2 {
                      font-size: 12px;
                      color: #999;
                    }
                    p {
                      width: 90%;
                      margin: 0;
                    }
                  }
                  .fabulous {
                    width: 90%;
                    margin: 2% 0 2% 10%;
                    display: flex;
                    .com {
                      width: 70%;
                      padding-right: 10%;
                      font-size: 16px;
                      color: #555;
                      p {
                        width: 100%;
                        margin: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      }
                    }
                    span {
                      flex: 1;
                      font-size: 12px;
                      position: relative;
                      color: #999;
                      text-align: right;
                      div {
                        padding-right: 0;
                      }
                      i {
                        position: absolute;
                        left: 10px;
                        &:nth-child(2) {
                          color: #fc6976;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .pl {
          .van-cell {
            .van-cell__title {
              font-size: 20px;
              color: #fc6976;
            }
          }
        }
      }
      .hg {
        width: 96%;
        height: 30px;
        margin: 5% 2%;
        p {
          padding: 5px 10px;
          margin: 0;
          float: right;
          text-align: center;
          width: 20%;
          background-color: #fc6976;
          border-radius: 5px;
          color: white;
        }
      }

      .Number-of-comments {
        width: 96%;
        margin: 0 2%;
        color: #fc6976;
        font-size: 14px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        span {
          background-color: #fc6976;
          padding: 0% 2%;
          color: white;
          border-radius: 5px;
          margin: 0 2%;
        }
        p {
          margin: 0;
        }
      }
      .inputs {
        width: 96%;
        margin: 2% 2%;
        border: 1px solid #fc6976;
        border-radius: 5px;
        .van-cell {
          padding: 2px 5px;
          border-radius: 5px;
        }
      }
    }
    .van-tab__text {
      font-size: 16px;
    }
    .van-tabs__line {
      background: #fc6976;
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 60px;
    z-index: 10;
    background-color: white;
    .share,
    .start {
      width: 50%;
      float: left;
      height: 60px;
    }
    .share {
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      font-weight: 400;
      div {
        width: 30%;
        p {
          font-size: 20px;
          margin: 0;
          color: #fc6976;
        }
        ul {
          width: 100%;
          height: 20px;
          color: #fc6976;
          position: relative;
          li {
            font-size: 20px;
            position: absolute;
            left: 33%;
          }
        }
      }
    }
    .start {
      color: white;
      font-size: 12px;
      background-image: linear-gradient(to right, #ff6b46, #ff2e67);
      text-align: center;
      line-height: 20px;
      p {
        font-size: 14px;
        padding-top: 10px;
        margin: 0;
      }
    }
  }
  .Popup {
    display: table;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .imgs {
      margin: 35% auto 5% auto;
      width: 45%;
      height: 20%;
      background-image: url(https://m.kanman.com/static/images/call/head_bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      color: #999;
      p {
        padding-top: 48%;
        margin: 0;
      }
    }
    ul {
      width: 69%;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      li {
        width: 65px;
        height: 65px;
        text-align: center;
        background-color: white;
        border-radius: 50%;
        margin-bottom: 5%;
        font-size: 12px;
        div {
          margin-top: 10px;
          font-size: 28px;
        }
        .color1 {
          color: #4a90e2;
        }
        .color2 {
          color: #ff9700;
        }
        .color3 {
          color: #05bed6;
        }
        .color4 {
          color: #fc7669;
        }
        .color5 {
          color: #ff1700;
        }
        .color6 {
          color: #ffca00;
        }
      }
    }
  }
  .shares {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
    ul {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 35%;
      background-color: white;
      p {
        width: 94%;
        margin: 15px auto 0;
        font-size: 14px;
        font-weight: bold;
        color: #646464;
      }
      li {
        width: 25%;
        float: left;
        margin-top: 10px;
        text-align: center;
        color: #999;
        font-size: 12px;
        p {
          width: 36px;
          height: 36px;
          color: white;
          margin: 3px auto;
          border-radius: 50%;
          font-size: 24px;
          text-align: center;
          line-height: 36px;
        }
        .icon-blue {
          background-color: #00b0fd;
        }
        .icon-green {
          background-color: #09b70e;
        }
        .icon-red {
          background-color: #fe001e;
        }
        .icon-yellow {
          background-color: #fdcd00;
        }
        .icon-lightgreen {
          background-color: #8bd908;
        }
      }
    }
    div {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      color: #999;
      text-align: center;
      background-color: #f4f4f4;
    }
  }
  .apprec {
    z-index: 99;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    .back {
      width: 100%;
      height: 35%;
      position: fixed;
      bottom: 0;
      background-color: white;
      .head {
        div {
          position: fixed;
          bottom: 33%;
          width: 40%;
          height: 15%;
          left: 30%;
          background-image: url(https://m.kanman.com/static/images/comm/recharge.png);
          background-size: 100% 100%;
          text-align: center;
          font-size: 12px;
          p {
            width: 52px;
            height: 52px;
            background-image: url(https://m.kanman.com/static/images/sprites/sprite.reward.e85dc@2x.png);
            background-size: 200%;
            background-repeat: no-repeat;
            margin: 10% auto 5%;
            color: #646464;
          }
          .gift {
            background-position: 104% 0;
          }
        }
      }
      .diamonds {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        opacity: 0.5;
        li {
          width: 28%;
          margin-top: 5%;
          border: 1px solid #ddd;
          text-align: center;
          padding-bottom: 2%;
          font-size: 12px;
          color: #999;
          box-shadow: 0 0 4px #ddd;
          p {
            width: 52px;
            height: 52px;
            background-image: url(https://m.kanman.com/static/images/sprites/sprite.reward.e85dc@2x.png);
            background-size: 200%;
            background-repeat: no-repeat;
            margin: 10% auto 0;
            color: #646464;
          }
          .gift {
            background-position: 104% 0;
          }
        }
      }
    }
  }
}
</style>